import React, { Component } from 'react'
import { Text, View, StyleSheet, ToastAndroid } from 'react-native'
import { TouchableHighlight } from 'react-native-gesture-handler'
import Global from './Global'

export default class MyLike extends Component {
    constructor(props) {
        super(props)

        this.state = {
            likeList: []
        }
    }

    componentDidMount = () => {
        var that = this
        if (Global.UInfo != undefined) {
            fetch('https://www.annjong.com/bcumusic/api/Like/myLikeMusic?likeUserId=' + Global.UInfo.userId)
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    var likeM = []
                    for (let i = 0; i < res.obj.length; i++) {
                        fetch('https://www.annjong.com/bcumusic/api/music/getById?id=' + res.obj[i].likeMusicId)
                            .then(res1 => res1.json())
                            .then(res1 => {
                                likeM.push(res1.obj)
                                that.setState({
                                    likeList: likeM
                                })
                            })
                    }
                })
        } else {
            ToastAndroid.show('请先登录！', 2)
        }
    }
    _refrish = () => {
        var that = this
        if (Global.UInfo != undefined) {
            fetch('https://www.annjong.com/bcumusic/api/Like/myLikeMusic?likeUserId=' + Global.UInfo.userId)
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    var likeM = []
                    for (let i = 0; i < res.obj.length; i++) {
                        fetch('https://www.annjong.com/bcumusic/api/music/getById?id=' + res.obj[i].likeMusicId)
                            .then(res1 => res1.json())
                            .then(res1 => {
                                console.log('循环', res1);
                                likeM.push(res1.obj)
                                that.setState({
                                    likeList: likeM
                                })
                            })
                    }
                    console.log('临时', likeM);
                })
        }else{
            ToastAndroid.show('请先登录！',2)
        }
        // console.log(this.state.likeList);
    }
    render() {
        return (
            <View>
                <View style={styles.main_box}>
                    <TouchableHighlight onPress={this._refrish} style={styles.title}>
                        <Text style={{ fontSize: 20 }}>我喜欢的音乐</Text>
                    </TouchableHighlight>
                    {this.state.likeList.map((music, index) => <View key={index} style={styles.title1}>
                        <Text>{index + 1}.{music.name}</Text>
                    </View>
                    )}
                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    title1: {
        width: '100%',
        height: 50,
        backgroundColor: 'white',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    title: {
        width: '100%',
        height: 50,
        backgroundColor: 'gray',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
    },
    main_box: {
        width: '80%',
        height: 500,
        backgroundColor: 'white',
        marginTop: 30,
        alignSelf: 'center',
        borderRadius: 10,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column'
    }
})
